<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/content.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <div class="header">
      <div class="head1">
        <img src="./images/header1.png" alt="" />
      </div>
      <div class="head2">
        <img src="./images/ico-comm5.png" alt="" />
      </div>
      <div class="head3">
        <input type="text" class="search" placeholder="请输入想要找的宝贝" />
      </div>
      <div class="head4"><a href="denglu.html">立即登录</a></div>
      <div class="head5"><a href="">购物车</a></div>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li><a href="head.html">首页</a></li>
        <li><a href="">枪模主题站</a></li>
        <li><a href="">服饰时尚</a></li>
        <li><a href="">包类专区</a></li>
        <li><a href="">数码外设</a></li>
        <li><a href="">家居日用</a></li>
        <li><a href="">模型手办</a></li>
      </ul>
    </div>
    <div class="contenty">
      <div class="box">
        <div class="show">
          <img src="./images/27.jpg" alt="" />
          <div class="mask"></div>
        </div>
        <div class="list">
          <p class="active">
            <img
              src="./images/27.jpg"
              showImg="./images/27.jpg"
              enlargeImg="./images/27.jpg"
              alt=""
            />
          </p>
          <p>
            <img
              src="./images/28.jpg"
              showImg="./images/28.jpg"
              enlargeImg="./images/28.jpg"
              alt=""
            />
          </p>
        </div>
        <div class="enlarge"></div>
      </div>
      <div class="product-info">
        <h3 class="pord-name">CF 链锁迷踪 灵狐1/7正比例手办</h3>
        <div class="pord-tips">CF首个22cm正比例手办周边</div>
        <div class="pord-price clearfix" style="height: auto">
          <!-- 预定商品价格展示 -->
          <span class="fl pord-dispri">￥<strong>698</strong></span>
        </div>

        <div class="pord-detailbox clearfix">
          <div class="fl pord-sold">已售：<span>700</span></div>
        </div>

        <div id="blk_detail_main_spec">
          <div class="mt10 pord-color pord-sellist clearfix">
            <label class="fl">款式</label>
            <ul class="fl ml28">
              <li attrid="330" class="current" style="overflow: hidden">
                <div class="pord-selbox">收藏版</div>
              </li>
              <li attrid="330" class="" style="overflow: hidden">
                <div class="pord-selbox">典藏版</div>
              </li>
            </ul>
          </div>
        </div>
        <div id="blk_detail_main_btn">
          <div class="mt10 pord-num clearfix">
            <label class="fl pt10">数量</label>
            <div class="fl ml42">
              <a
                href="javascript:;"
                class="fl num-plus numbtn num-plus btn_detail_main_buy_min"
                ><i class="ico-detail">-</i></a
              >
              <input
                type="text"
                size="2"
                maxlength="3"
                stock_num="100"
                limit_num="0"
                class="fl nummidbtn num inpt_detail_main_buy_num"
                value="1"
              />
              <a
                href="javascript:;"
                class="fl numbtn num-minus btn_detail_main_buy_plus"
                ><i class="ico-detail">+</i></a
              >
            </div>
          </div>
          <div class="pord-btn clearfix">
            <a
              id="btn_detail_cart_add"
              href="javascript:;"
              class="fl joincart-btn"
              >加入购物车</a
            >
            <a
              id="btn_detail_cart_buy"
              href="javascript:;"
              class="fl ml30 buy-btn"
              >立即购买</a
            >
            <!-- <a href="javascript:;" class="fl btn-collect">
                <i class="ico-detail ico-collect"></i>
                <span>收藏</span>
              </a> -->
            <a
              href="javascript:;"
              class="fl btn-collected"
              style="display: none"
            >
              <i class="ico-detail ico-collect"></i>
              <span>已收藏</span>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <div class="footer1">
        <a href=""><img src="./images/20.png" alt="" /></a
        ><a href=""><img src="./images/21.png" alt="" /></a>
      </div>
      <ul class="footer2">
        <li><a href="">购物指南</a></li>
        <li><a href="">配送方式</a></li>
        <li><a href="">常见操作</a></li>
        <li><a href="">售后服务</a></li>
        <li><a href="">关于我们</a></li>
      </ul>
      <div class="footer3">
        <span><img src="./images/22.png" alt="" /></span>
        <span><img src="./images/23.png" alt="" /></span>
      </div>
    </div>
    <div class="footer-end">
      <div class="footer-end1"><img src="./images/24.png" alt="" /></div>
    </div>
    <script>
      var activeEle = document.querySelector(".active");
      var showEle = document.querySelector(".show "); // 示范图
      var maskEle = document.querySelector(".mask"); //遮罩图
      var enlargeEle = document.querySelector(".enlarge");
      var boxEle = document.querySelector(".box");
      //   console.log(activeEle.nextElementSibling);

      activeEle.nextElementSibling.onmouseover = function () {
        showEle.firstElementChild.src = "./images/28.jpg";
        enlargeEle.style.backgroundImage = "url(./images/28.jpg)";
      };
      activeEle.onmouseover = function () {
        showEle.firstElementChild.src = "./images/27.jpg";
        enlargeEle.style.backgroundImage = "url(./images/27.jpg)";
      };
      showEle.onmouseover = function () {
        maskEle.style.display = "block";
        enlargeEle.style.display = "block";
      };

      showEle.onmouseleave = function () {
        maskEle.style.display = "none";
        enlargeEle.style.display = "none";
      };

      showEle.onmousemove = function (e) {
        // var x = e.clientX - 150;
        // var y = e.clientY - 150;
        var x = e.clientX - boxEle.offsetLeft - maskEle.offsetWidth / 2;
        var y = e.clientY - boxEle.offsetTop - maskEle.offsetHeight / 2;
        console.log(x, y);
        // maskEle.style.left = x + "px";
        // maskEle.style.top = y + "px";

        // 边界判断；
        // 左边判断
        if (x < 0) {
          x = 0;
        }
        // 右边判断
        if (x > this.offsetWidth - maskEle.offsetWidth) {
          x = this.offsetWidth - maskEle.offsetWidth;
        }

        // 上边边界

        if (y < 0) {
          y = 0;
        }

        // 下边边界
        if (y > this.offsetHeight - maskEle.offsetHeight) {
          y = this.offsetHeight - maskEle.offsetHeight;
        }

        // 获取enlarge的背景图的宽和高；

        var bgSize = getComputedStyle(enlargeEle, null)["background-size"];
        console.log(bgSize);
        var arr = bgSize.split(" ");
        var wNum = parseInt(arr[0]); //背景图的宽
        var hNum = parseInt(arr[1]); //背景图的高；

        // 获取x距离
        var xx = (maskEle.offsetLeft / this.offsetWidth) * wNum;
        var yy = (maskEle.offsetTop / this.offsetHeight) * hNum;
        console.log(xx, yy);
        enlargeEle.style.backgroundPosition = `-${xx}px -${yy}px`;
        // console.log(x,y);
        maskEle.style.left = x + "px";
        maskEle.style.top = y + "px";
      };
      let but = document.querySelector("#btn_detail_cart_add");
      but.onclick = function () {
        window.location.href = "./denglu.html";
      };
    </script>
  </body>
</html>
